<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport"
	content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0" />
<link rel="stylesheet"
	href="${pageContext.request.contextPath }/statics/css/sapar.css" />
<link rel="stylesheet" type="text/css"
	href="${pageContext.request.contextPath }/statics/css/common.css" />
<link rel="stylesheet" type="text/css"
	href="${pageContext.request.contextPath }/statics/css/my_order.css" />
<link rel="stylesheet" type="text/css"
	href="${pageContext.request.contextPath }/statics/css/bootstrap.min.css" />
<script type="text/javascript"
	src="${pageContext.request.contextPath }/statics/js/jquery.js"></script>
<script type="text/javascript"
	src="${pageContext.request.contextPath }/statics/js/sapar.js"></script>
<script type="text/javascript"
	src="${pageContext.request.contextPath }/statics/js/WdatePicker.js"></script>
<title>供应商款统计</title>
</head>
<body>
	<div id="saper-container">
		<div id="saper-hd"></div>
		<div id="saper-bd">
			<div class="subfiled clearfix">
				<h2>供应商款统计</h2>
			</div>
			<div class="subfiled-content">
				<div class="tab-container" data-trigger="click">
					<!--按钮-->

					<!--<button class="btn btn-primary" data-toggle="modal" data-target="#mymodal">点击按钮触发弹框2</button>-->
					<!-- data-toggle:字面理解是数据切换，意思就是我们要触发什么事件 -->
					<!-- data-target:字面理解是数据目标，意思是我们具体触发哪一个 -->
					<div class="tab">
						<a href="javascript:;" class="current btn btn-primary">付款单查询</a> <a
							href="javascript:;" class="btn btn-primary">应付款查询</a> <a href="#mymodal"
							data-toggle="modal" class="btn btn-primary">添加付款单</a>
					</div>
					<div class="tab-content">
						<div class="tab-content-item">
							<form name="f1" id="f1"
								action="?m=system&amp;c=myInfo&amp;a=updateInfo&amp;type=1"
								method="post">
								<div class="search-box clearfix">
									<div class="kv-item clearfix">
										<label>订单编号：</label>
										<div class="kv-item-content">
											<input type="text" placeholder="订单号" />
										</div>
									</div>
									<div class="kv-item clearfix">
										<label>结算时间：</label>
										<div class="kv-item-content time-select-wrap">
											<div class="time-select">
												<input type="text"
													onfocus="WdatePicker({dateFmt:'yyyy-MM-dd'})"
													placeholder="开始时间" /> <i class="date-icon"></i>
											</div>
											<span class="line">-</span>
											<div class="time-select">
												<input type="text"
													onfocus="WdatePicker({dateFmt:'yyyy-MM-dd'})"
													placeholder="结束时间" /> <i class="date-icon"></i>
											</div>
										</div>
									</div>
									<a href="javascript:;"
										class="sapar-btn sapar-btn-recom query-btn">查询</a>
								</div>
							</form>
							<!--表格开始-->
							<div class="table">

								<!--表格具体内容-->
								<div class="table-box">
									<table>
										<thead>
											<tr>
												<td>付款单查询</td>
												<td colspan="3"><input type="text" /></td>
												<td>预览/打印</td>
												<td colspan="3"><input type="text" /></td>
												<td>导出表格</td>
												<td colspan="3"><input type="text" /></td>
											</tr>
											<tr>
												<!--<th>订单号</th>
                                                <th>航班号</th>
                                                <th>起飞时间</th>
                                                <th>行程</th>
                                                <th>人数</th>
                                                <th>总价</th>
                                                <th>操作人</th>
                                                <th>申请时间</th>
                                                <th>操作</th>-->
												<th>序号</th>
												<th>付款单号</th>
												<th>供应商</th>
												<th>入库类别</th>
												<th>入库单号</th>
												<th>结算方式</th>
												<th>实付金额</th>
												<th>入库人员</th>
												<th>入库时间</th>
												<th>付款日期</th>
												<th>所属店铺</th>
											</tr>
										</thead>
										<tbody>
											<tr class="no-data">
												<td colspan="11">暂时没有数据</td>
											</tr>
											<tr>
												<td></td>
												<td></td>
												<td></td>
												<td></td>
												<td></td>
												<td></td>
												<td></td>
												<td></td>
												<td></td>
												<td></td>
												<td></td>
											</tr>
											<tr style="background-color: #EFF6FA;">
												<td></td>
												<td></td>
												<td></td>
												<td></td>
												<td></td>
												<td></td>
												<td></td>
												<td></td>
												<td></td>
												<td></td>
												<td></td>
											</tr>
											<tr>
												<td></td>
												<td></td>
												<td></td>
												<td></td>
												<td></td>
												<td></td>
												<td></td>
												<td></td>
												<td></td>
												<td></td>
												<td></td>
											</tr>
										</tbody>
									</table>
								</div>
							</div>
							<!--表格结束-->
						</div>
						<div class="tab-content-item">
							<form name="f2" id="f2"
								action="?m=system&amp;c=myInfo&amp;a=updateInfo&amp;type=1"
								method="post">
								<div class="search-box clearfix">
									<div class="kv-item clearfix">
										<label>订单号：</label>
										<div class="kv-item-content">
											<input type="text" placeholder="订单号">
										</div>
									</div>
									<div class="kv-item clearfix">
										<label>申请时间：</label>
										<div class="kv-item-content time-select-wrap">
											<div class="time-select">
												<input type="text"
													onfocus="WdatePicker({dateFmt:'yyyy-MM-dd'})"
													placeholder="开始时间"> <i class="date-icon"></i>
											</div>
											<span class="line">-</span>
											<div class="time-select">
												<input type="text"
													onfocus="WdatePicker({dateFmt:'yyyy-MM-dd'})"
													placeholder="结束时间"> <i class="date-icon"></i>
											</div>
										</div>
									</div>
									<a href="javascript:;"
										class="sapar-btn sapar-btn-recom query-btn">查询</a>
								</div>
							</form>
							<!--表格开始-->
							<div class="table">
								<!--表格具体内容-->
								<div class="table-box">
									<table>
										<thead>
											<tr>
												<th>序号</th>
												<th>供货商</th>
												<th>入库类别</th>
												<th>入库单号</th>
												<th>实付金额</th>
												<th>未付金额</th>
												<th>入库人员</th>
												<th>入库时间</th>
												<th>所属店铺</th>
											</tr>
										</thead>
										<tbody>
											<tr class="no-data">
												<td colspan="10">暂时没有数据</td>
											</tr>
											<tr>
												<td></td>
												<td></td>
												<td></td>
												<td></td>
												<td></td>
												<td></td>
												<td></td>
												<td></td>
											</tr>
											<tr style="background-color: #EFF6FA;">
												<td></td>
												<td></td>
												<td></td>
												<td></td>
												<td></td>
												<td></td>
												<td></td>
												<td></td>
											</tr>
										</tbody>
									</table>
								</div>
							</div>
							<!--表格结束-->
						</div>
					</div>
				</div>
			</div>
		</div>
		<div id="saper-ft"></div>
	</div>

	<!--弹出的模态框-->
	<div id="mymodal" class="modal fade">
		<!-- modal固定布局，上下左右都是0表示充满全屏，支持移动设备上使用触摸方式进行滚动。。-->
		<div class="modal-dialog modal-dialog">
			<!-- modal-dialog默认相对定位，自适应宽度，大于768px时宽度600，居中-->
			<div class="modal-content">
				<form action="" method="post" enctype="multipart/form-data">
					<!-- modal-content模态框的边框、边距、背景色、阴影效果。-->
					<div class="modal-header">
						<button class="close" data-dismiss="modal">&times;</button>
						<center>
							<h3 class="modal-title">填写付款单</h3>
						</center>
					</div>
					<div class="media-body">
						<div class="addjiejidan">
							<center>
								<table bordercolor="lightgray" border="2">
									<tr align="right">
										<td>供货商</td>
										<td><input type="text" class="form-control" /></td>
										<td>联系电话</td>
										<td><input type="text" class="form-control" /></td>
									</tr>
									<tr>
										<td>入库单号</td>
										<td><input type="text" class="form-control" /></td>
										<td>入库类别</td>
										<td><input type="text" class="form-control" /></td>
									</tr>
									<tr>
										<td>付款金额</td>
										<td><input type="text" class="form-control" /></td>
										<td>结算方式</td>
										<td><input type="text" class="form-control" /></td>
									</tr>
									<tr>
										<td>入库时间</td>
										<td><input type="text" class="form-control" /></td>
										<td>入库人员</td>
										<td><input type="text" class="form-control" /></td>
									</tr>
									<tr align="right">
										<td>付款日期</td>
										<td><input type="text" class="form-control" /></td>
										<td>所属店铺</td>
										<td><input type="text" class="form-control" /></td>
									</tr>
									<tr>
										<td>收款缘由</td>
										<td colspan="3"><input type="text" class="form-control" /></td>
									</tr>
								</table>
							</center>
						</div>
					</div>
					<div class="modal-footer">
						<button class="btn btn-default" data-dismiss="modal">关闭</button>
						<button class="btn btn-primary">保存</button>
					</div>
				</form>
			</div>
		</div>

	</div>

</body>
<script type="text/javascript"
	src='${pageContext.request.contextPath }/statics/js/jquery-1.12.4.js'></script>
<script type="text/javascript"
	src='${pageContext.request.contextPath }/statics/js/bootstrap.js'></script>
<script type="text/javascript">
	$('select').iSelect();
	/*		$('.modal').modal();*/
</script>

</html>